<template>
    <div class="page-container" style="width: 100%; height: 100%;">
        <md-app md-waterfall  md-mode="reveal" >
            <md-app-toolbar class="md-primary">
                <md-button class="md-icon-button">
                    <md-icon>menu</md-icon>
                </md-button>
                <span class="md-title">Students</span>
            </md-app-toolbar>
            <md-app-content>
                <div class="md-layout md-gutter md-alignment-center-space-around">
                    <div class="md-layout-item md-size-50"><Units></Units></div>
                    <div class="md-layout-item md-size-50"><Assessments></Assessments></div>
                </div>
                <br/>
                <div class="md-layout md-gutter md-alignment-center-space-around">
                    <div class="md-layout-item md-size-50"><Groups></Groups></div>
                    <div class="md-layout-item md-size-50"><Tasks></Tasks></div>
                </div>
            </md-app-content>
        </md-app>

    </div>
</template>

<style lang="scss" scoped>
    @import "~vue-material/dist/theme/engine";

    .md-layout-item {
        height: 600px;
    }
    .md-app {
        border: 1px solid rgba(#000, .12);
    }

</style>

<script>
import Units from './card/Units'
import Assessments from './card/Assessments'
import Tasks from './card/Tasks'
import Groups from './card/Groups'

    export default {
        name: 'Overlap',
        data: () => ({
            menuVisible: false
        }),
        components: {
            Units,
            Assessments,
            Tasks,
            Groups
        }
    }
</script>